<template>
  <menu class="u_act_menu-wrapper">
    <template v-for="(menu,menuIndex) in menus">
      <mivaLink :class="['i-menu',menu.icon]" :key="menuIndex" :to="menu.to">{{menu.title}}</mivaLink>
    </template>
  </menu>
</template>

<script>
export default {
    data() {
        return {
            menus: [
                { to: '/', title: '个人中心', icon: 'el-icon-user' },
                { to: '/', title: '投稿管理', icon: 'el-icon-folder-opened' },
                { to: '/', title: '这是测试', icon: 'el-icon-folder-opened' },
                { to: '/', title: '这是测试', icon: 'el-icon-folder-opened' },
                { to: '/', title: '这是测试', icon: 'el-icon-folder-opened' },
            ],
        };
    },
};
</script>

<style lang="less">
.u_act_menu-wrapper {
  width: 100%;
  border-top: 1px solid @global_background_grey;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .i-menu {
    width: 50%;
    margin: 5px 0;
    padding: 3px 0;
    font-size: 12px;
    white-space: nowrap;
    &:nth-child(even) {
      padding-left: 20px;
      border-left: 1px solid @global_background_grey;
    }
    &::before {
      margin-right: 5px;
    }
  }
}
</style>
